<template>
  <div v-for="(item, index) in list" :key="index" class="list-cont">
    <div class="list-left flex">
      <Image :src="icons[item.type]" :width="26" :height="24" :preview="false" />
      <span class="list-title">{{ item.name }}</span>
    </div>
    <div class="list-right flex">
      <span class="list-time">{{ item.updateTime }}</span>
      <span class="list-size">{{ item.size }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Image } from 'ant-design-vue';
  import { icons } from '../hooks/index';

  const list = ref([
    { name: '施工项目汇总', updateTime: '2023年06月26日 09时10分', size: '230M', type: 'file' },
    { name: '人事部资料整理', updateTime: '2023年06月26日 09时10分', size: '230M', type: 'file' },
    { name: '微信图片123.png', updateTime: '2023年06月26日 09时10分', size: '10KB', type: 'image' },
  ]);
</script>

<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .list-cont {
    border-bottom: 1px solid #f5f6f7;
    padding: 18px 24px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    .flex;
    justify-content: space-between;

    &:hover {
      background: #f4f5f6;
    }

    .list-left {
      white-space: nowrap;
      width: calc(100% - 280px);

      .list-title {
        margin-left: 8px;
        width: calc(100% - 54px);
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .list-right {
      color: rgba(0, 0, 0, 0.3);
      width: 260px;

      .list-size {
        margin-left: 24px;
      }
    }
  }
</style>
